<template>
  <div class="cyber-fish-container">
    <div class="cyber-fish" :class="{ hit: isHitting }" @click="hitFish">
      <div class="fish-body">
        <div class="fish-pattern"></div>
        <div class="fish-pattern"></div>
        <div class="fish-pattern"></div>
      </div>
      <div class="fish-stick"></div>
    </div>
    <div class="counter">功德 +{{ count }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { hitAudio } from '@/assets/audios/muyv/index'

const count = ref(0)
const isHitting = ref(false)
const audio = new Audio(hitAudio)

const hitFish = () => {
  isHitting.value = true
  count.value++
  audio.currentTime = 0
  audio.play()

  setTimeout(() => {
    isHitting.value = false
  }, 300)
}
</script>

<style scoped lang="scss">
.cyber-fish-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
  background: #0a0a0a;
  color: #00ff00;
  font-family: 'Courier New', monospace;
}

.cyber-fish {
  position: relative;
  width: 200px;
  height: 200px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cyber-fish.hit {
  transform: translateY(10px);
}

.fish-body {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  border: 2px solid #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.fish-pattern {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid #00ff00;
  border-radius: 50%;
  background: transparent;
}

.fish-pattern:nth-child(1) {
  top: 30%;
  left: 30%;
}

.fish-pattern:nth-child(2) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fish-pattern:nth-child(3) {
  top: 30%;
  right: 30%;
}

.fish-stick {
  position: absolute;
  width: 20px;
  height: 100px;
  background: #1a1a1a;
  border: 2px solid #00ff00;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

.counter {
  margin-top: 2rem;
  font-size: 1.5rem;
  text-shadow: 0 0 10px #00ff00;
  animation: glow 2s infinite;
}

@keyframes glow {
  0%,
  100% {
    text-shadow: 0 0 10px #00ff00;
  }
  50% {
    text-shadow: 0 0 20px #00ff00;
  }
}
</style>
